<template>
  <div class='intro'>
    <p class="tab">
      <span v-for="(item, index) in modelData" :key="index" class="hover" @click="gotoHere(index)">{{item.label}}</span>
    </p>
    <IntroHead ref="introHead1" :title="'商品介绍'" />
    <ProductIntro />
    <IntroHead ref="introHead2" :title="'商品参数'" />
    <ProductParams />
    <IntroHead ref="introHead3" :title="'商品评价'" />
    <ProductCommont />
  </div>
</template>
<script>
import IntroHead from './head.vue'
import ProductIntro from './productIntro.vue'
import ProductParams from './productParams.vue'
import ProductCommont from './productCommont.vue'
export default {
  components: {IntroHead,ProductIntro,ProductParams,ProductCommont},
  name: "",
  data() {
    return {
      modelData:[
        {label:"商品介绍"},
        {label:"商品参数"},
        {label:"商品评价"}
      ]
    };
  },
  methods: {
    gotoHere(index){
      let top = this.$refs['introHead'+(index+1)].$el.offsetTop
      document.querySelector('html').scrollTop=top
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.intro {
  width: calc(100% - 20px);
  font-size: 14px;
  .tab{
    line-height: 40px;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;

    span{
      display: inline-block;
      width: 100px;
      text-align: center;
      border-right: 1px solid #f2f2f2;
    }
  }
}
</style>